<template>
  <!-- 外层盒子 -->
  <div class="wrap" style="width:48%;">
    <p class="text">各单位入园车辆榜单</p>
    <div class="ultitle">
      <ul class="ulflex">
        <li style="text-align: center; padding: 0 0px">排序</li>
        <li style="text-align: center; ">企业名称</li>
        <li style="text-align: center; ">进出车辆总数</li>
      </ul>
    </div>
    <!-- 这里的标签名称要和main.js文件中定义的组件名称保持一致 -->
    <happy-scroll color="#04bbdd" size="8" resize hide-horizontal>
      <!-- 内层盒子——内容区 -->
      <div class="con">
        <ul class="contentul">
          <li
            v-for="(item, i) in 30"
            :key="i"
            :class="item % 2 == 0 ? 'c1b68ba' : 'c0a396f'"
          >
            <p style="text-align: center">1</p>
            <p style="text-align: center">宏港石化</p>
            <p style="text-align: center">84</p>
          </li>
          <li style="width: 100%; background: #0a396f">
            <p style="width: 100px; text-align: center; font-size: 12px">点击加载更多</p>
          </li>
        </ul>
      </div>
    </happy-scroll>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>

/deep/ .ultitle {
  background: #04bbdd;
  height: 0.755vw;
  line-height: 0.755vw;
  padding: 0.208vw 0.208vw;
  /* width: 17vw; */
  color: #fff;
}
/deep/ .ulflex {
  display: flex;
  justify-content: space-between;
}
/deep/ .ulflex > li {
  flex: 1;
  font-size: 0.365vw;
  overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

}
/deep/ .con {
  width: 100%;
}
/deep/ .contentul {
  /* padding-top:34px; padding-left:10px;
   padding-right:10px;*/
  padding-bottom: 32px;
}

/deep/ .contentul > li > p {
  flex: 1;
  color: #fff;
  font-size: 0.313vw;
}
/deep/ .happy-scroll-container .happy-scroll-content {
  width: 100%;
}
/deep/ .happy-scroll-container{
    width: 9.76vw !important;
    height: 7.37vw !important;
}
/deep/ .text {
  font-size: 0.52vw;
    color: #fff;
    padding-bottom: 0.45vw;
}

/deep/ .con {
  width: 95%;
}
/deep/ .contentul {
  /* padding-top:34px; padding-left:10px;
   padding-right:10px;*/
  padding-bottom: 1.3vw;
}
/deep/ .contentul > li {
  /* width: 17vw; */
  height: 0.755vw;
  line-height: 0.755vw;
  display: flex;

  padding: 0.26vw 0.26vw;
  margin-bottom: 0.026vw;
}
/deep/ .c0a396f {
  background: #0a396f;
}
/deep/ .c1b68ba {
  background: #227bd7;
}
/deep/ .contentul > li > p {
//   flex: 1;
justify-content: space-between;
}
/deep/ .contentul > li:hover {
  background: rgb(44, 118, 217);
}
</style>
